body{
    background-color: #040c1f;
}

*{
    margin: 0;
    padding: 0;
}
.top{
    margin: 0 auto;
    width: 1200px;
    height: 55px;
    /*background-color: #05497a;*/
    background-image: url("../img/top3_04.jpg") ;
    background-position: bottom center;
    background-repeat: repeat-x;
    position: relative;
}
.top::before{
    content:'';
    position:absolute;
    top: 0;
    left: -49px;
    width: 0;
    height: 0;
    border: 25px solid #0e4e81;
    border-left: 25px solid transparent;
    border-bottom: 25px solid transparent;

}
.top::after{
    content:'';
    position:absolute;
    top: 0;
    right: -49px;
    width: 0;
    height: 0;
    border: 25px solid #0e4e81;
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;

}

.top > h2{
    line-height: 55px;
    text-align: center;
    color:#fcfdfd;
    font-size: 30px;
    text-shadow: 0 0 5px #66acb4;
    font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
}

.middle{
    display: flex;
    flex-direction: row;
    margin:15px 80px 0px;
    justify-content : space-between;
    background-color: #091535;
    border: 2px solid #2e7bb2;
    position: relative;
}
.middle_left{
    width: 300px;
    height: 1080px;
    margin-left: 10px;
    margin-top: 50px;
}
.middle_m{
    width: 650px;
    height: 800px;
    z-index: 999;
    position: relative;
}
.middle_right{
    width: 300px;
    height: 1080px;
    margin-top: 50px;
    margin-right: 10px;
    position: relative;
}
.device_left{
    width: 210px;
    background-color: #081435;
    height: 150px;
    margin-top: 35px;
    border: 2px solid #2e7bb2;
    border-right: none;
    position: relative;

}

.device_left::before{
    content:'';
    position: absolute;
    top: -16px;
    right: -38px;
    width: 2px;
    height: 106px;
    background-color: #fff;
    transform: rotate(-45deg);

}
.device_left::after{
    content:'';
    position: absolute;
    width: 2px;
    height: 106px;
    bottom: -16px;
    right: -38px;
    transform: rotate(45deg);
    background-color: #fff;

}
.line1{
    position: absolute;
    width: 2px;
    height: 60px;
    right: -105px;
    top: 45px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line2{
    position: absolute;
    width: 2px;
    height: 245px;
    right: -134px;
    top: 75px;
    background-color: #91ca5c;
    z-index: 5;
}
.line3{
    position: absolute;
    width: 2px;
    height: 360px;
    right: -313px;
    top: 139px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line7{
    position: absolute;
    width: 2px;
    height: 30px;
    right: -90px;
    top: 59px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line8{
    position: absolute;
    width: 2px;
    height: 85px;
    right: -106px;
    top: 73px;
    background-color: #91ca5c;
    z-index: 5;
}
.line9{
    position: absolute;
    width: 2px;
    height: 360px;
    right: -285px;
    top: -24px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line10{
    position: absolute;
    width: 2px;
    height: 30px;
    left: -90px;
    top: 59px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line11{
    position: absolute;
    width: 2px;
    height: 85px;
    left: -106px;
    top: 73px;
    background-color: #91ca5c;
    z-index: 5;
}
.line12{
    position: absolute;
    width: 2px;
    height: 360px;
    left: -285px;
    top: -24px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line13{
    position: absolute;
    width: 2px;
    height: 30px;
    right: -90px;
    top: 59px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line14{
    position: absolute;
    width: 2px;
    height: 85px;
    right: -106px;
    top: -10px;
    background-color: #91ca5c;
    z-index: 5;
}
.line15{
    position: absolute;
    width: 2px;
    height: 360px;
    right: -285px;
    top: -188px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line16{
    position: absolute;
    width: 2px;
    height: 30px;
    left: -90px;
    top: 59px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line17{
    position: absolute;
    width: 2px;
    height: 85px;
    left: -106px;
    top: -10px;
    background-color: #91ca5c;
    z-index: 5;
}
.line18{
    position: absolute;
    width: 2px;
    height: 360px;
    left: -285px;
    top: -188px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line19{
    position: absolute;
    width: 2px;
    height: 60px;
    right: -105px;
    top: 45px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line20{
    position: absolute;
    width: 2px;
    height: 245px;
    right: -134px;
    top: -171px;
    background-color: #91ca5c;
    z-index: 5;
}
.line21{
    position: absolute;
    width: 2px;
    height: 360px;
    right: -313px;
    top: -351px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.line22{
    position: absolute;
    width: 2px;
    height: 60px;
    left: -105px;
    top: 45px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line23{
    position: absolute;
    width: 2px;
    height: 245px;
    left: -134px;
    top: -171px;
    background-color: #91ca5c;
    z-index: 5;
}
.line24{
    position: absolute;
    width: 2px;
    height: 360px;
    left: -313px;
    top: -351px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.device_right{
    float:right;
    width: 210px;
    background-color: #081435;
    height: 150px;
    margin-top: 35px;
    border: 2px solid #2e7bb2;
    border-left: none;
    position: relative;

}

.device_right::before{
    content:'';
    position: absolute;
    top: -16px;
    left: -38px;
    width: 2px;
    height: 106px;
    background-color: #fff;
    transform: rotate(45deg);

}
.device_right::after{
    content:'';
    position: absolute;
    width: 2px;
    height: 106px;
    bottom: -16px;
    left: -38px;
    transform: rotate(-45deg);
    background-color: #fff;

}
.line4{
    position: absolute;
    width: 2px;
    height: 60px;
    left: -105px;
    top: 45px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 5;
}
.line5{
    position: absolute;
    width: 2px;
    height: 245px;
    left: -134px;
    top: 75px;
    background-color: #91ca5c;
    z-index: 5;
}
.line6{
    position: absolute;
    width: 2px;
    height: 360px;
    left: -313px;
    top: 139px;
    transform:rotate(90deg);
    background-color: #91ca5c;
    z-index: 2;
}
.content{
    display: flex;
    color:#fff;
    font-size: 18px;
}
.left_content {
    margin: 20px 10px 5px;
}
.right_content{
    padding-top: 5px;
    margin-right: -50px;
    padding-left: 30px;

}
.right_content > div{
    margin-top: 8px;
}
.right_content > div >span{
    color:#dbb119;
}
.device_left > h3{
    color:#fff;
    font-size: 20px;
    margin-left: 5px;
    margin-top: 5px;
    font-weight: 400;
}
.device_right  >h3{
    color:#fff;
    font-size: 20px;
    display: flex;
    justify-content: flex-end;
    margin-right: 5px;
    margin-top: 5px;
    font-weight: 400;
}
#line_direction_chart{
    border-radius: 5px;
    border-top: 2px solid #31cecb;
    border-left: 2px solid #103d7a;
    border-right: 2px solid #103d7a;
    border-bottom: 2px solid #093086;
    z-index: 99;
}
.middle_m_top{
    display: flex;
    flex-direction: row;
    width: 500px;
    height: 100px;
    background-color: #041235;
    margin-bottom:75px;
    margin-left: 70px;
    margin-top: 15px;
    border-radius: 5px;
    border-top: 2px solid #31cecb;
    border-left: 2px solid #103d7a;
    border-right: 2px solid #103d7a;
    border-bottom: 2px solid #093086;
    position: relative;

}
.middle_m_top_left{
    width: 200px;
    font-size: 18px;
    color:#c1c3cd;
    margin-left: 5px;
}
.middle_m_top_left > div{
    margin-top: 20px;
    margin-left: 5px;
    width: 200px;
}
.middle_m_top_left > div > span{
    color:#dbb119;
}
.middle_m_top_right{
    width: 200px;
    display: flex;
    flex-direction:column;
    font-size: 18px;
    color:#c1c3cd;
    margin-left: 100px;
}
.middle_m_top_right > div > span{
    color:#dbb119;
}
.middle_m_top_right > div{
    margin-top: 20px;
    margin-left: 5px;
    width: 200px;
}
.top_img{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.top_arrow{
    position: absolute;
    top:100px;
    left:222px;


}
.left_img{
    width: 200px;
    height: 200px;
    margin-left:30px
}
.middle_m_bottom{
    width: 650px;
    height: 350px;
    border-radius: 5px;
    border-top: 2px solid #31cecb;
    border-left: 2px solid #103d7a;
    border-right: 2px solid #103d7a;
    border-bottom: 2px solid #093086;
    background-color: #041235;
    margin-top: 70px;
    position: relative;
}

.middle_m_bottom > form  .formTitle{
    margin-top: 20px;
    line-height: 20px;
    text-align: center;
}
.middle_m_bottom > form  .formTitle > h2{
    color:#fcfdfd;
    font-size: 30px;
    margin: 0 auto;
    text-shadow: 0 0 5px #66acb4;
    font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体;
}
.middle_m_bottom > form > div{
    color:#fff
}
.middle_m_bottom > form > div > input[type=text]{
    display: inline-block;
    height: 30px;
    width: 300px;
    border-radius: 5px;
    border-top: 2px solid #31cecb;
    border-left: 2px solid #103d7a;
    border-right: 2px solid #103d7a;
    border-bottom: 2px solid #093086;
    font-size:20px
}

.middle_m_bottom > form > div >label{
    color:#fff
}
.middle_m_bottom > form > div > input[type=text]:hover,
.middle_m_bottom > form > div > input[type=text]:focus{
    border:2px solid #85afe1;
    -webkit-box-shadow:inset 0 2px 2px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow:inset 0px 2px 2px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6);
}
.middle_m_bottom > form > div > input[type=submit]{
    display: inline-block;
    border-radius: 5px;
    width: 100px;
    height: 30px;
    margin-left: 140px;
    margin-top: 30px;
    font-size: 18px;


}
.middle_m_bottom > form .temContent{
    margin-left: 120px;
    margin-top: 40px;
}
.bottom_arrow{
    position: absolute;
    top: -71px;
    left:290px;
}
.bottom_arrow > img{
    width: 80px;
    height: 75px;
}
.lineImg{
    position: absolute;
    height: 300px;
    width: 50px;
    background-color: #fff;
    right: 0;
    top: 0;

}
.lineImg > img{
    height: 300px;
    width: 50px;
}
.lineImg1 > img{
    height: 300px;
    width: 50px;
}
.lineImg{
    position: absolute;
    height: 300px;
    width: 50px;
    background-color: #fff;
    right: 0;
    top: 0;

}
.lineImg1{
    position: absolute;
    height: 300px;
    width: 50px;
    background-color: #fff;
    left: 0;
    top: 0;

}
.work{
    position: absolute;
    bottom: 60px;
    right: 20px;
    width: 300px;
    height: 200px;
    background-color: #001133;
    border-radius: 5px;
    border-top: 2px solid #31cecb;
    border-left: 2px solid #103d7a;
    border-right: 2px solid #103d7a;
    border-bottom: 2px solid #093086;
    color:#ffffff;
    font-size: 18px;
}
.work_content{
    display: flex;
    width: 350px;
    margin-top: 10px;
    font-size: 16px;
    color:#fff;
}
.work_left > img{
    width: 50px;
    height: 50px;
    /*flex-grow: inherit;*/
}

.triangle{
    position: absolute;
    top: -2px;
    left:-2px;
    width: 0;
    height: 0;
    border: 20px solid #040c1f;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;

}

.para {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #185b89;
    position: absolute;
    top: -2px;
    left: 18px;
    transform: skewX(-45deg);

}
.text{
    display: inline-block;
    transform: skewX(45deg);
    color:#d0d8e1;
    font-size: 20px;
}
.triangle1{
    position: absolute;
    top: -53px;
    right:-12px;
    width: 0;
    height: 0;
    border: 20px solid #040c1f;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.para1 {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #185b89;
    position: absolute;
    top: -52px;
    right: 6px;
    transform: skewX(45deg);

}

.text1{
    display: inline-block;
    transform: skewX(-45deg);
    color:#d0d8e1;
    font-size: 20px;
}
.device_right .content .right_content{
    padding-left: 0px;
}
.device_right .content .left_content{
    margin-left:20px
}

.labelImg1{
    position: absolute;
    top: 488px;
    left: 70px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg2{
    position: absolute;
    top: 380px;
    left: 168px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg3{
    position: absolute;
    top: 235px;
    left: 151px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg4{
    position: absolute;
    top: 646px;
    left: 215px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg5{
    position: absolute;
    top: 204px;
    left: 394px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg6{
    position: absolute;
    top: 633px;
    left: 462px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg7{
    position: absolute;
    top: 333px;
    left: 511px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg8{
    position: absolute;
    top: 473px;
    left: 577px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.labelImg9{
    position: absolute;
    top: 362px;
    left: 303px;
    color:#fff;
    font-size:20px;
    z-index:999;
}
.notice{
    width: 80px;
    height: 80px;
    background-color:#041235;
    right: 50px;
    top: 210px;
    position:absolute;
    z-index:999;
    color:#fff
}
.notice_content{
    display: flex;
}
.notice_content > div{
    width: 20px;
    height: 20px;
}

.notice_content > span{
    font-size: 14px;
}